 <div ng-controller="HrMainCtrl as vm">
 <section class="content-header" >
  <!-- Content Header (Page header) -->
    <h1>
      HR Main board
      <small></small>
    </h1>
    <ol class="breadcrumb">
      <li><button ng-disabled="!vm.editable" class="btn btn-danger btn-xs"ng-click="vm.saveTable()"><i class="fa fa-check-square-o"></i>Submit</button>  </li>
    
    </ol>
  </section>

          <!-- Main content -->
<section class="content">
  <div class="row">
  <div class="col-md-6">
  <div class="box box-primary">
  <div class="box-header with-border">
    <h3 class="box-title">Function Leader Turnover</h3>
    <div class="pull-right">
      <button ng-disabled="!vm.editable" class="btn btn-info btn-xs"ng-click="vm.saveTable()">Save</button>
        
    
  </div>
  </div>
  <div class="box-body table-responsive no-padding">
    <table class="table table-hover">
            <form class="form-inline">
              <table class="table table-bordered table-condensed">
                <tr>
                  <th>Function Leader</th>
                  <th>MTD. </th>
                  <th>YTD. </th>
                </tr>
                <tr ng-repeat="ret in vm.result2">
                  <td>{{ret.type}}</td>                
                  <td><input type="text" ng-disabled="!vm.editable" class="number-input" ng-model="ret.mtd" ng-change="vm.calculateYtd(ret)"/></td>
                  <td>{{ret.ytd}}</td>
                </tr>
           
              </table>
              </form>
    </table>

  </div><!-- /.box-body -->
</div><!-- /.box -->
</div>
  <div class="col-md-6">
      <div class="box box-warning">
  <div class="box-header with-border">
    <h3 class="box-title">Exit Interview</h3>
    <div class="pull-right">
     <!--  <button class="btn btn-info btn-xs"ng-click="vm.saveTable()">Save</button>
        <button class="btn btn-danger btn-xs"ng-click="vm.saveTable()"><i class="fa fa-check-square-o"></i>Submit</button>  
     -->
  </div>
  </div>
  <div class="box-body table-responsive no-padding" style="height: 330px">
  TBD
              </form>
    </table>

  </div><!-- /.box-body -->
</div><!-- /.box -->
  </div>

</div>
<div class="box box-info">
  <div class="box-header with-border">
    <h3 class="box-title">Turnover by Department</h3>
    <button class="btn btn-info btn-xs pull-right"ng-click="vm.saveTable()">Save</button>
  </div>
  <div class="box-body table-responsive no-padding">
    <table class="table table-hover">
            <form class="form-inline">
              <table class="table table-bordered table-condensed">
                <tr>
                  <th>Depart</th>
                  <th>Period</th>
                  <th>Band 1</th>
                  <th>Band 2</th>
                  <th>Band 3</th>
                  <th>Band 4</th>
                  <th>Band 5</th>
                  <th>Band 6</th>
                  <th>Band 7</th>
                  <th>Band 8</th>
                  <th>Band 9</th>
                  <th>Band 10</th>
                  <th>Total</th>
                  <th>All total ({{vm.totalSum}})</th>
                </tr>
                <tr ng-repeat="ret in vm.result">
                  <td ng-show="ret.showDepart" rowspan="3">{{ret.depart}}</td>
                  <td>{{ret.type}}</td>
                  
                  <td><input type="text" ng-disabled="!vm.editable" class="number-input" ng-model="ret.band1" ng-change="vm.calculate(ret)"/></td>
                  <td><input type="text" ng-disabled="!vm.editable" class="number-input" ng-model="ret.band2" ng-change="vm.calculate(ret)"/></td>
                  <td><input type="text" ng-disabled="!vm.editable" class="number-input" ng-model="ret.band3" ng-change="vm.calculate(ret)"/></td>
                 
                  <td><input type="text" ng-disabled="!vm.editable"  class="number-input" ng-model="ret.band4" ng-change="vm.calculate(ret)"/></td>
                  <td><input type="text" ng-disabled="!vm.editable"  class="number-input" ng-model="ret.band5" ng-change="vm.calculate(ret)"/></td>
                  <td><input type="text" ng-disabled="!vm.editable" class="number-input" ng-model="ret.band6" ng-change="vm.calculate(ret)"/></td>

                  <td><input type="text" ng-disabled="!vm.editable" class="number-input" ng-model="ret.band7" ng-change="vm.calculate(ret)"/></td>
                  <td><input type="text" ng-disabled="!vm.editable" class="number-input" ng-model="ret.band8" ng-change="vm.calculate(ret)"/></td>
                  <td><input type="text" ng-disabled="!vm.editable" class="number-input" ng-model="ret.band9" ng-change="vm.calculate(ret)"/></td>

                  <td><input type="text" ng-disabled="!vm.editable" class="number-input" ng-model="ret.band10" ng-change="vm.calculate(ret)"/> </td>
                  <td>{{ret.total}}</td>
                  <td rowspan="3" ng-show="ret.showDepart">{{ret.allTotal}}</td>
                </tr>
           
              </table>
              </form>
    </table>

  </div><!-- /.box-body -->
</div><!-- /.box -->
</div>
</section><!-- /.content -->
</div>